<template>
    <main-wrap :loading="true" :load="onLoad" :end="page.finished">
        <template v-slot:header>
            <Header title="艺术遇见AR"/>
        </template>
        
        <ul class="meetList wrapfix">
            <li v-for="dt in page.lists" :key="dt.arArtistId">
               <a @click="goDetail(dt)">
                    <div class="imgbox">
                        <img v-if="dt.headUrl" :src="dt.headUrl" :alt="dt.name">
                    </div>
                    <div class="title">{{dt.name}}</div>
                </a>
            </li>
        </ul>
        <empty v-if="page.finished && page.lists.length<1"/>
        
    </main-wrap>
</template>

<script>
import {reactive,toRefs, onMounted,computed } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import Header from '@/components/header.vue'
import mainWrap from '@/components/mainWrap.vue'
import Image from '@/components/image.vue'
import {toast} from '@/utils/common.js'
import empty from '@/components/empty.vue'
export default {
    components:{
        mainWrap,
        Header,
        Image,
        empty
    },
    setup(){
        const store = useStore()
        const router = useRouter()

        const state = reactive({
            page:{
                lists:[],
                pageIndex:1,
                pageSize:10,
                finished: false
            }
        })

        onMounted(()=>{
           onLoad()
        })

        const onLoad = ()=> {
            // 此函数必须返回一个Promise对象
            return new Promise((resolve, reject) => {
                setTimeout(async () => {
                    const res = await store.dispatch("arApi/get_meet_ar", {
                        page: state.page.pageIndex,
                        limit: state.page.pageSize,
                        //"orderField": "",
                        //"orderType": "",
                    });
                    state.page.lists = [...state.page.lists, ...res.data];
                    state.page.pageIndex++;
                    if (state.page.lists.length >= res.total) {
                        state.page.finished = true;
                    }
                    resolve(true);
                }, 500);
            });
        }

        const goDetail = (o)=>{
            router.push(`/landmark/${o.arArtistId}?type=2&lat=${o.locationLatitude || 0}&lng=${o.locationLongitude || 0}`)
        }         

        return {
            ...toRefs(state),
            onLoad,
            goDetail
        }
    }
}
</script>

<style lang="scss" scoped>
    .meetList{
        overflow: hidden;
        padding: 30px 40px 0 40px;
        li{
            margin: 0 0 30px 0;
            a{
                display: block;
                .imgbox{
                    width: 100%;
                    max-height: 300px;
                    overflow: hidden;
                    img{
                        display: block;
                        width: 100%;
                    }
                }
                .title{
                    height: 80px;
                    line-height: 80px;
                    width: 100%;
                    background: url('/images/tbg.png');
                    background-position: left top;
                    background-size: 100% 100%;
                    font-size: 26px;
                    padding: 0 30px;
                }
            }
        }
    }
</style>